import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//引入element ui 组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//使用element ui的图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.config.globalProperties.openLoading = function (){
    const loading = this.$loading({ // 声明一个loading对象
        lock: true, // 是否锁屏
        target: '.sub-main', // 需要遮罩的区域
        body: true,
        background: '#ffffff',
        customClass: 'mask' // 遮罩层新增类名
    })
    setTimeout(function () { // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题
        loading.close() // 关闭遮罩层
    }, 5000)
    return loading
}
// app.config.globalProperties.$openLoading = true;


// 防止连点
app.directive('throttle', {
    mounted (el, binding) {
        el.addEventListener('click', () => {
            el.style.pointerEvents = 'none'
            if (!el.disabled) {
                setTimeout(() => {
                    el.style.pointerEvents = 'auto'
                }, binding.value || 2000)
            }
        })
    }
})

//路由导航守卫

app.use(store)
app.use(ElementPlus)
app.use(router)
app.mount('#app')


